:root {
  /* region Color */
  --nova-color-white: hsl(0, 0%, 100%);
  --nova-color-primary: hsl(210, 100%, 50%);
  --nova-color-primary-shadow: hsla(210, 100%, 50%, 0.5);
  --nova-color-black-shadow: hsla(0, 0%, 0%, 0.5);
  /* endregion */

  --nova-bg-checkerboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M15 20v-5h-5v-5H5V5h5v5h5v5h5v5zM5 20v-5H0v-5h5v5h5v5zm10-10V5h-5V0h5v5h5v5zM0 5V0h5v5z' fill='rgba(0,0,0,0.5)'/%3E%3C/svg%3E");

  --nova-cubic-bezier-out-cubic: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* region duration */
  --nova-duration-short: 100ms;
  --nova-duration-normal: 200ms;
  --nova-duration-long: 300ms;
  /* endregion */

  /* region transition */
  --nova-transition-component: border var(--nova-duration-short) linear,
    box-shadow var(--nova-duration-short) linear;
  --nova-transition-border: border var(--nova-duration-short) linear;
  --nova-transition-bg: background var(--nova-duration-short) linear;
  /* endregion */

  /* region Font */
  --nova-font-sans-serif: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue',
    Helvetica, Arial, source-han-sans-simplified-c, 'Apple Color Emoji',
    'Segoe UI Emoji', sans-serif;
  --nova-font-monospace: 'Sarasa Mono SC', Iosevka, 'Fira Code', source-code-pro,
    Monaco, Consolas, monospace;
  --nova-font-size: 14px;
  --nova-line-height: 20px;
  /* endregion */

  /* region Shadow */
  --nova-shadow-primary: 0 0 0 2px var(--nova-color-primary-shadow);
  --nova-shadow-dropdown: 0px 10px 20px hsla(0, 0%, 0%, 0.25);
  --nova-shadow-cursor: 0 0 0 1px var(--nova-color-black-shadow),
    inset 0 0 0 1px var(--nova-color-black-shadow);
  /* endregion */

  /* region Border */
  --nova-border-primary: 1px solid var(--nova-color-primary);
  --nova-border-invisible: 1px solid transparent;
  --nova-radius-component: 10px;
  --nova-radius-close: 6px;
  --nova-radius: 5px;
  --nova-radius-tiny: 2px;
  /* endregion */
}
